<template>
  <div>
    <div class='tabbar-box' :style='{background:tabBar.backgroundColor||"#ffffff"}'>
      <div v-for="(item,index) in tabBar.list" :key="index"  class='tabbar-box-item' :style="{color: item.key == nowPageKey ? tabBar.selectedColor : tabBar.color}" @click="change(item.key, item.is_show)" v-if="item.is_show==1">
          <i :class="['tabbar-box-item__icon','iconfont', item.key == nowPageKey ? item.selectedIconPath : item.iconPath]"></i>
          <div class='tabbar-box-item__text' :style="{color: item.key == nowPageKey ? tabBar.selectedColor : tabBar.color}">{{item.name}}</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tabbar',
  props: {
    tabBar: Object,
    nowPageKey: Number
  },
  methods: {
    change (key, isShow) {
      this.$emit('change', {key, isShow})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabbar-box {
  background: white;
  display: flex;
  align-items: center;
  font-size: 11px;
  border-top: 1px solid #f3f3f3;
  height: 56px;
  width: 100%;
}

.tabbar-box-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tabbar-box-item__img {
  width: 28px;
  height: 28px;
  margin: 0 0;
}

.tabbar-box-item__icon {
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 1px;
}

.tabbar-box-item__text {
  text-align: center;
  color: #333;
  font-size: 11px;
  line-height: 1.5;
}
</style>
